<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" height="150" width="150"></canvas>
    <script>
        // line的lineCap属性，这是线段的端头的样式
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            // 分别对应平头、圆头、正方形
            const lineCap = ["butt", "round", "square"];
            ctx.strokeStyle = '#09f';
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(140, 10);
            ctx.moveTo(10, 140);
            ctx.lineTo(140, 140);
            ctx.stroke();
            ctx.strokeStyle = "#000";
            for (let i = 0; i < lineCap.length; i++) {
                ctx.lineWidth = 15;
                ctx.lineCap = lineCap[i];
                ctx.beginPath();
                ctx.moveTo(25+ i * 50, 10);
                ctx.lineTo(25+ i * 50, 140);
                ctx.stroke();
            }
        }
    </script>
</body>
</html>